<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src=".././static/js/public-head.js"></script>
</head>
<body >

<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input class="layui-input" name="searchStr" id="searchStr" placeholder="输入数据源名称" lay-filter="query"  autocomplete="off">
                    </div>
                </div>
                <table class="layui-hide" id="test-table-reload" lay-filter="test-table-reload"></table>
            </div>
        </div>
    </div>
</div>


<script>
    var token = localStorage.getItem("token")
    layui.use([ 'table','form'], function(){
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;

        var exportData = []

        var tableOption = {
            elem: '#test-table-reload'
            ,url: basePath + '/xdDataSource/index'
            ,where:{token:token}
            ,toolbar:commonUtil.toolbarHTML()
            ,title:"数据源"
            ,defaultToolbar:['filter', 'print']
            ,cols: [[
                {  title: '请选择', width:80,type:"radio"}
                ,{field:'SOURCE_NAME', title: '数据源名称', edit:'text',sort:true}
                ,{field:'DRIVER_CLASS_NAME', title: '数据库驱动',  edit:'text'}
                ,{field:'URL', title: '数据库链接', edit:'text' }
                ,{field:'USERNAME', title: '用户名' ,edit:'text'}
                ,{field:'PASSWORD', title: '密码' , width:80,edit:'text',templet:function(d){
                    return "******"
                }}
                ,{field:'CREATOR', title: '创建人'   }
                ,{field:'STATE', title: '是否启用', width:100,templet:"#dataSource-state"}

            ]]
            ,exportHead:{SOURCE_NAME: '数据源名称',
                            DRIVER_CLASS_NAME: '数据库驱动',
                            URL: '数据库链接',
                            USERNAME: '用户名',
                            PASSWORD: '密码' ,
                            STATE: '是否启用' }
            ,page: true
            ,height: 'full-100'
            // ,width: 600
            ,done:function(res){
                exportData = res.data
            }
        };
        //方法级渲染
        var sourceTable = table.render(tableOption);
        //执行重载
        $("#data-query-bt").click(function(){
            tableReload()
        })

        table.on("edit(test-table-reload)",function(obj){

            var param = {value:obj.value,column:obj.field,id:obj.data.ID,token:token }

            $.getJSON(basePath+"/xdDataSource/update",param,function(res){
                if(res.code !=0){
                    layer.msg(res.msg)
                }else{
                    return true;
                }
            } )
        })


        form.on('switch(dataSource-state)', function(obj){
            var state = obj.elem.checked?1:0;
            var value = obj.value;
            var param = {value:state ,column:"state",id:value,token:token }

            $.getJSON(basePath+"/xdDataSource/update",param,function(res){
                if(res.code !=0){
                    layer.msg(res.msg)
                }else{
                    return true;
                }
            } )
        })

        table.on("toolbar(test-table-reload)",function(obj){
            var checkStatus = table.checkStatus(obj.config.id);

            switch(obj.event){
                case "query":
                    tableReload();
                    break;
                case "test":
                    if(checkStatus.data.length !=0){
                        var id = checkStatus.data[0].ID
                        var param = {id:id,token:token}
                        var index = layer.load(0); //又换了种风格，并且设定最长等待10秒
                        $.getJSON(basePath+"/xdDataSource/test",param,function(res){
                            layer.open({content:res.msg,
                                title:"<i class='layui-icon layui-icon-note'></i> 测试链接",
                                icon:0});
                            layer.close(index);
                        } )
                    }else{
                        layer.msg("请选中后再测试")
                    }
                    break;
                case 'add':
                       // console.log($("#dataSource-add").html())
                    layer.open({
                        type:1,
                        title:"<ii class='layui-icon layui-icon-note'> 新增DataSource</ii>",
                        content: $("#dataSource-add").html()  ,
                        area: ['400px', '400px']
                    })
                    break;
                case 'downLoad':
                    //console.log(JSON.stringify(exportData));
                    //console.log(JSON.stringify(tableOption.exportHead));
                    JSONToExcelConvertor(exportData , tableOption.title, tableOption.exportHead);
                    break;
                case 'del':
                        if(checkStatus.data.length !=0){
                            var id = checkStatus.data[0].ID
                            var param = {id:id,token:token}
                            layer.confirm('确定要删除该记录吗？', {icon:0, title:'提示'}, function(index){

                                $.getJSON(basePath+"/xdDataSource/del",param,function(res){
                                    if(res.code !=0){
                                        layer.msg(res.msg)
                                    }else{
                                        layer.close(layer.index)
                                        tableReload()
                                        layer.close(index);
                                        return true;
                                    }
                                } )
                            });
                        }else{
                            layer.msg("请选中后再删除")
                        }
                    break;
            };
        })

        form.on("submit(dataSource-form-bt)",function(data){
            var param = data.field;
            param.token = token;
            $.getJSON(basePath+"/xdDataSource/add",param,function(res){
                if(res.code !=0){
                    layer.msg(res.msg)
                }else{
                    layer.close(layer.index)
                    tableReload()
                    return true;
                }
            } )
            return false;
        })

        function tableReload(){
            table.reload("test-table-reload",{
                where:{
                    searchStr: $("#searchStr").val()
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            })
        }
    });


</script>

<script type="text/html" id="dataSource-state"  >
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="state" value="{{d.ID}}" lay-skin="switch" lay-text="是|否" lay-filter="dataSource-state" {{ d.STATE == 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="dataSource-toolBar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="export">导出Excel</button>
        <button class="layui-btn layui-btn-sm" lay-event="test">测试链接</button>
     </div>
</script>

<script type="text/html" id="dataSource-add">

    <div class="layui-fluid">
        <div class="layui-card">

            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form" action="" lay-filter="dataSource-form">

                    <select  lay-filter="aihao"  >
                        <option value="0">写作</option>
                        <option value="1">阅读</option>
                    </select>

                    <div class="layui-form-item">
                        <label class="layui-form-label">数据源名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="sourceName" lay-verify="required" autocomplete="off" placeholder="给数据库链接取别名" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">库驱动名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="driverClassName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">数据库链接</label>
                        <div class="layui-input-block">
                            <input type="text" name="url" lay-verify="required" autocomplete="off" placeholder="数据库链接地址" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" lay-verify="required"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="text" name="password" lay-verify="required" autocomplete="off"  class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item layui-layout-admin">
                        <div class="layui-input-block">
                            <div class="layui-footer" style="left: 0;">
                                <button class="layui-btn" lay-submit="" lay-filter="dataSource-form-bt">立即提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</script>
</body>
</html>

<!--
add / del / downLoad /query /test
-->